@charset "utf-8";

// 默认按钮/确认按钮
@mixin button-default(){
    border: none;
    background-color: #6f55c0;
    color: #fff;
    text-align: center;
    text-decoration: none;

    &:hover {
        text-decoration: none;
        background-color: #8032f5;
    }

    &.disabled,
    &.disabled:hover {
        border: 1px solid #ddd;
        color: #999;
        background-color: #f8f8f8;
        cursor: not-allowed;
    }
}
%button-default {
    @include button-default();
}


// 空心按钮
@mixin button-empty() {
    border: 1px solid #ddd;
    color: #666;
    text-align: center;
    text-decoration: none;

    &:hover{
        color: #6f55c0;
        border-color: #6f55c0;
        text-decoration: none;
    }

    &.disabled,
    &.disabled:hover {
        border: 1px solid #ddd;
        color: #999;
        background-color: #f8f8f8;
        cursor: not-allowed;
    }
}
%button-empty {
    @include button-empty();
}







// 弹窗样式
// --------------------------------------------------------------------------
.dialog-background {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 990;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: rgba(0, 0, 0, .5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000,endColorstr=#88000000);
}

.dialog-section {
    opacity: 0;
    filter: alpha(opacity=0);
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999;
    padding: 0;
    margin: 0;
    background-color: #FFF;
    box-shadow: 0 0 8px rgba(0, 0, 0, .5);
}

.dialog-body,
.dialog-imagelist {
    box-sizing: content-box;
    z-index: 1;
    min-width: 580px - 32px - 32px;
    height: 100%;
    padding: 32px;
    padding-top: 48px;
    margin: 0;
    overflow:hidden;

    &.withNoPadding {
        padding: 0;
    }

    &.withNoMinWidth {
        min-width: auto;
        min-width: 0;
    }
}

.dialog-body img {
    display: block;
    vertical-align: top;
}

.dialog-btnPrev,
.dialog-btnNext {
    position: absolute; 
}

.dialog-btnPrev,
.dialog-btnNext {
    top: 50%;
    z-index: 9;
    margin-top: -18px;
    width: 36px;
    height: 36px;
    overflow: hidden;
    font: 16px/36px 'Simsun';
    text-align: center;
    color: #fff !important;
    cursor: pointer;
    background-color: #7F7F7F;
    background-color: rgba(0, 0, 0, .5);
}

.dialog-btnPrev {
    left: 0;
}

.dialog-btnNext {
    right: 0;
}

.dialog-disabled {
    cursor: not-allowed;
    background-color: rgba(0, 0, 0, .3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#44000000,endColorstr=#44000000);
}

.dialog-header {
    position: relative;
    width: auto;
    height: 39px;
    padding: 0 46px 0 16px;
    margin: 0;
    border-bottom: 1px solid #d9d9d9;
    font-size: 16px;
    line-height: 39px;
    white-space: nowrap;
    background-color: #e6e6e6;

    + .dialog-body {
        padding-top: 32px;

        &.withNoPadding {
            padding: 0;
        }
    }
}

.dialog-close {
    display: inline-block;
    vertical-align: middle;
    background-image: url("images/icons-dialog.png");
    background-repeat: no-repeat;
    position: absolute;
    right: 16px;
    top: 12px;
    width: 14px;
    height: 14px;
    padding: 0;
    margin: 0;
    background-position: 0 -135px;
    cursor: pointer;
}












// 弹窗布局封装
// --------------------------------------------------------------------------

// 提示框
// xidiDialog.sendMsg()
// xidiDialog.sendSuccess()
// xidiDialog.sendWarning()
// xidiDialog.sendError()
#dialogTipBox {

    .dialog-body {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .dialog-msg {
        padding: 0;
        margin: 0;
        text-align: center;
    }

    .dialog-msg-text {
        padding: 0;
        margin: 0;
        font-size: 16px;
    }

    .i-success,
    .i-warning,
    .i-error {        
        position: relative;
        display: inline-block;
        top: -2px;
        margin-right: 20px;
        width: 36px;
        height: 36px;
        vertical-align: middle;
        background-image: url("images/icons-dialog.png");
        background-repeat: no-repeat;
    }

    .i-success {
        background-position: 0 0;
    }

    .i-warning {
        background-position: 0 -45px;
    }

    .i-error {
        background-position: 0 -90px;
    }
}


// 咨询框
// xidiDialog.sendConfirm()
.dialog-confirm {
    box-sizing: content-box;
    position: relative;
    width: 235px;
    min-width: 235px;
    font-size: 0;
    text-align: left;
    margin: 0 auto;

    &.withCenter {
        text-align: center;
    }

    &.withIcon,
    &.withIconSuccess,
    &.withIconWarning,
    &.withIconError {
        padding-left: 54px;

        &:before {
            content: '';
            display: inline-block;
            vertical-align: middle;
            background-image: url("images/icons-dialog.png");
            background-repeat: no-repeat;
            position: absolute;
            left: 0;
            top: 0;
            width: 36px;
            height: 36px;
            background-position: 0 -45px;
        }
    }

    &.withIconSuccess:before {
        background-position: 0 0;
    }

    &.withIconWarning:before {
        background-position: 0 -45px;
    }

    &.withIconError:before {
        background-position: 0 -90px;
    }

    .dialog-msg {
        padding: 0;
        margin: 0;
        font-size: 16px;
        line-height: 32px;

        + .dialog-desc {
            margin-top: 10px;
        }
    }

    .dialog-desc {
        padding: 0;
        margin: 0;
        font-size: 12px;
        line-height: 24px;
        margin-bottom: 20px;
    }

    .dialog-content {
        padding: 0;
        margin: 0;
        font-size: 12px;
        line-height: 24px;
        text-align: left;

        + .dialog-buttonBox {
            text-align: center;
        }
    }

    .dialog-buttonBox {
        overflow: hidden;
        padding: 0;
        margin: 24px 0 0 0;

        a {
            margin-left: 15px;
        }

        a:first-child {
            margin-left: 0;
        }
    }

    .dialog-submit,
    .dialog-cancel {
        display: inline-block;
    }

    .dialog-submit {
        width: 98px;
        height: 29px;
        font-size: 12px;
        line-height: 29px;
        @extend %button-default;
    }

    .dialog-cancel {
        box-sizing: content-box;
        width: 96px;
        height: 27px;
        font-size: 12px;
        line-height: 27px;
        @extend %button-empty;
    }
}


// 顶部成功提示
// xidiDialog.sendSuccessToTop()
.dialog-success-top {
    position: fixed;
    left: 50%;
    top: 0;
    z-index: 999;
    min-width: 400px;
    padding: 0;
    margin: 0;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    font-size: 16px;
    line-height: 46px;
    text-align: center;
    color: #fff;
    background-color: #4aac42;

    .i-icon {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        width: 26px;
        height: 18px;
        margin-right: 15px;
        background: url("images/icons-dialog.png") no-repeat 0 -180px;
    }
}


// 顶部错误警告提示
// xidiDialog.sendWarningToTop()
.dialog-warning-top {
    position: fixed;
    left: 50%;
    top: 0;
    z-index: 999;
    min-width: 400px;
    padding: 0;
    margin: 0;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    font-size: 16px;
    line-height: 46px;
    text-align: center;
    color: #fff;
    background-color: #ff4400;
}